"use strict";

import {
    //核心
    React, Enhance, Controller, Component, $, EventEmitter,
    //
    tools, classnames,
    // 组件
    Table, TabPage, Lang, Dialog, Tree,
    Form, Page, Upload, Icon, Grid,
    BoxWidget, Input, Button, Prompt, Link, Loaders, Editor, Resource, Directive, Lock, Fix
} from 'admin';

import FroalaEditor from 'FroalaEditor';
import debug from 'debug';
import valid from '../validate/admin.json';

var {http, date, time} = tools;
const log = debug('ysw.article');

/**
 *
 */
class FittingNumberController extends Controller {
    state = {
        status: [
            {title: '开启', value: 1},
            {title: '关闭', value: 0}
        ],
        //unit: [
        //    {title: 10201008, value: 10201008},
        //    {title: 10201009, value: 10201009},
        //],
        table1: {
            update: {},
            query: {},
            types: {
                label: function (data, options) {
                    if (data.val == 0)
                        return <span className={classnames('label bg-red')}><Lang lang={'已关闭'}/></span>;
                    if (data.val == 1)
                        return <span className={classnames('label bg-yellow')}><Lang lang={'已开启'}/></span>
                }
            },
            onRowClick: this._handlerRowClick,
            buttons: {
                'edit': {
                    onClick: this._handlerEditDialog
                }
            },
            pk: 'id',
            fields: [
                {
                    title: "#",
                    width: 1,
                    type: {
                        name: "#"
                    }
                },
                {
                    order: -1,
                    name: 'id',
                    width: 1,
                    display: false
                },
                {
                    order: 0,
                    name: 'img',
                    type: {
                        name: 'image',
                        options: {
                            baseUrl: window.SERVER_URL + '/source/ysw/article/',
                            vars: 'img_time'
                        }
                    },
                    width: 1
                },
                {
                    name: 'title',
                    order: 0,
                },
                {
                    width: 1,
                    name: 'status',
                    order: 0,
                    type: {
                        name: 'label'
                    }
                },
                {
                    order: 0,
                    name: 'time',
                    type: {
                        name: 'datetime'
                    },
                    display: false
                },
            ]
        },
        row: {},
        edit: {},
        saveButton: null,
        updateButton: null
    }
    
    /**
     * 在componentWillMount()在挂载发生之前立即被调用。
     */
    componentWillMount() {
    
    }
    
    /**
     *
     */
    constructor() {
        super();
    }
    
    render() {
        var {edit, row} = this.state;
        var config = {
            height: 568,
            heightMax: 568,
            width: 320,
        }
        
        return (
            <Grid>
                <Grid col="12 12 12 12">
                    {this.renderTable1()}
                </Grid>
                {/*添加*/}
                {this.renderAddDialog()}
                {/*编辑*/}
                {this.renderEditDialog()}
            </Grid>
        );
    }

    /**
     *
     * @return {*}
     */
    renderTable1() {
        return (
            <BoxWidget
                color="3"
                className="table-height scroll"
            >
                <div data-fix="buttons">
                    <Button onClick={this._handlerAddDialog}>
                        <Icon icon="add"></Icon>
                        <Lang lang="add"></Lang>
                    </Button>
                </div>
                <div data-fix="content">
                    <Lock>
                        <Table ref="table" {...this.props} {...this.state.table1}/>
                    </Lock>
                </div>
            </BoxWidget>
        );
    }

    /**
     *
     * @return {*}
     */
    renderAddDialog() {
        return (
            <Directive name="Modal">
                <Dialog
                    ref="addDialog"
                    title={this._lang("add")}
                    rules={{title: 'required'}}
                >
                    <div data-fix="elem">
                        <Form
                            action={this._action('do_add')}
                            onSuccess={this._handlerAddSuccess}
                        />
                    </div>
                    <div data-fix="content">
                        <Input type="text" name="title" message={this._lang("title")}/>
                        <Input type="select" name="status" option={this.state.status}
                               message={this._lang('status')} placeholder="Please select"/>
                    </div>
                    <div data-fix="buttons">
                        <Button type="submit">
                            <Lang lang="submit"></Lang>
                        </Button>
                    </div>
                </Dialog>
            </Directive>
        );
    }

    /**
     *
     * @return {*}
     */
    renderEditDialog() {
        var {edit, row} = this.state;
        return (
            <Directive name="Modal">
                <Dialog
                    ref="editDialog"
                    title={this._lang("edit")}
                >
                    <div data-fix="elem">
                        <Form
                            action={this._action('do_edit')}
                            onSuccess={this._handlerEditSuccess}
                        />
                    </div>
                    <div data-fix="content">
                        <Input type="hidden" name="id" model={edit}/>
                        <Input type="text" name="title" message={this._lang("title")} model={edit}/>
                        <Input type="select" name="status" option={this.state.status} model={edit}
                               message={this._lang('status')} placeholder="Please select"/>
                    </div>
                    <div data-fix="buttons">
                        <Button type="submit">
                            <Lang lang="submit"></Lang>
                        </Button>
                    </div>
                </Dialog>
            </Directive>
        );
    }
    
    /**
     *
     * @private
     */
    _handlerAddDialog() {
        this.refs.addDialog.show();
    }
    
    /**
     *
     * @param edit
     * @private
     */
    _handlerEditDialog(edit) {
        this.setState({edit}, function () {
            this.refs.editDialog.show();
        })
    }
    
    /**
     *
     * @param data
     * @private
     */
    _handlerAddSuccess(data) {
        if (data) {
            this.refs.table.append(data);
            this.refs.addDialog.hide();
        }
    }
    
    
    /**
     *
     * @param update
     * @private
     */
    _handlerEditSuccess(data) {
        if (data) {
            this.refs.table.update(data);
            this.refs.editDialog.hide();
        }
    }
    
    /**
     * 表单查询
     * @param data
     * @returns {boolean}
     * @private
     */
    _handlerQuery(data) {
        this.refs.table.query(data);
        return false;
    }
    
}

export default Enhance(FittingNumberController);
